<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.goodsName" placeholder="商品名" class="handle-input mr10"></el-input>
                <el-input v-model="query.sellerName" placeholder="卖家名" class="handle-input mr10"></el-input>
                <el-input v-model="query.details" placeholder="商品描述" class="handle-input mr10"></el-input>
                <el-input v-model="query.goodsType" placeholder="商品类型" class="handle-input mr10"></el-input>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="goodsId" label="商品id" width="100" align="center"></el-table-column>
                <el-table-column prop="goodsType" label="商品类型"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="details" label="商品描述"></el-table-column>
                <el-table-column prop="sellerName" label="卖家"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="brand" label="品牌"></el-table-column>
                <el-table-column label="图片" align="center">
                    <template #default="scope">
                        <el-image
							class="table-td-thumb"
							:src="getImageUrl(scope.row.picture)"
							:z-index="10"
							style="width: 100px; height: 100px"
							:preview-src-list="[scope.row.pic]"
							fit="fill"
							preview-teleported>
						</el-image>
                        
                    </template>
                </el-table-column>
                <el-table-column prop="listTime" label="上架时间"></el-table-column>
                <el-table-column prop="delistingTime" label="下架时间"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                <!-- <el-table-column label="操作" align="center"> -->
                    
                <!-- </el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <!-- <el-dialog title="编辑" v-model="editVisible" width="30%">
            <el-form label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog> -->
    </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, List } from '@element-plus/icons-vue';
import { fetchData } from '../api/index';
import http from '../utils/request'
import { getImageUrl } from '../utils/index';
import type { UploadProps } from 'element-plus'
interface TableItem {
    goodsId: number;
    goodsName: string;
    goodsType: string;
    details: string;
    sellerName: string;
    picture: string;
    price: string;
    listTime: String;
    delistingTime: String;
    createTime: String;
    updateTime: String;
}

const query = reactive({
    // address: '',
    goodsName: '',
    details: '',
    goodsType: '',
    sellerName: '',
    pageNum: 1,
    pageSize: 10
});
//要显示的 
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
    // fetchData().then(res => {
    //     tableData.value = res.data.list;
    //     pageTotal.value = res.data.pageTotal || 50;
    // });

    http.get("/admin/goods/list", {
		params: query
	}).then((res: any) => {
		console.log('获取用户信息 res = ', res)
		tableData.value = res.data.data.list;
		pageTotal.value = res.data.data.total;	//
	}).catch((err: any) => {
		console.log('获取用户信息 res = ', err)
	})
};
getData();

// 查询操作
const handleSearch = () => {
    query.pageNum = 1;
    getData();
};
// 分页导航
const handlePageChange = (val: number) => {
    query.pageNum = val;
    getData();
};

// 删除操作
const handleDelete = (row: any) => {
    // 二次确认删除
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    })
        // .then(() => {
        //     ElMessage.success('删除成功');
        //     tableData.value.splice(index, 1);
        // })
        // .catch(() => { });
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    name: '',
    address: ''
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
    idx = index;
    form.name = row.name;
    form.address = row.address;
    editVisible.value = true;
};
const saveEdit = () => {
    // editVisible.value = false;
    // ElMessage.success(`修改第 ${idx + 1} 行成功`);
    // tableData.value[idx].name = form.name;
    // tableData.value[idx].address = form.address;
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
